<!--
 * @Author: boyyang
 * @Date: 2022-01-29 10:00:42
 * @LastEditTime: 2022-01-29 21:44:30
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\plugin\boyyangUI\glassCard\index.vue
-->

<template>
    <div class="y-glass-card">
        <div class="y-glass-card-content">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
interface IGlassCardProps {
    width?: string; // width: 默认250px 可以设置为百分比
    height?: string; // height: 默认350px 可以设置为百分比
    borderRadius?: number; // border-radius 圆角 默认5px
    blur?: number; // glass opcity 玻璃透明度 默认为10px
    boxShadow?: string; // box-shandow 默认 3px 5px 2px 2px rgba(0, 0, 0, 0.1)
}

const props = withDefaults(defineProps<IGlassCardProps>(), {
    width: '250px',
    height: '350px',
    borderRadius: 5,
    blur: 10,
    boxShadow: '3px 5px 2px 2px rgba(0, 0, 0, 0.1)'
})
</script>

<style scoped>
.y-glass-card {
    box-sizing: border-box;
    width: v-bind("props.width");
    height: v-bind("props.height");
    border-radius: calc(v-bind("props.borderRadius") * 1px);
    overflow: hidden;

    box-shadow: v-bind("props.boxShadow");
    display: inline-block;
}

.y-glass-card-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(calc(v-bind("props.blur") * 1px));
}
</style>
